<template>
  <div class="about" @scroll="scroll" ref="dom">
    <button @click="$router.back()">返回</button>
    <ul>
      <router-link tag="li" :to="`/detail/${item}/${16}`" v-for="item in 30">{{ item }}
      </router-link>
    </ul>
  </div>
</template>
<script>
export default {
  name:"About",
  created(){
    console.log('页面B');
  },
  data(){
    return {
      scrollTop: 0
    }
  },
  methods: {
    jump(val) {
      // // query 传参
      // let obj = {
      //   name: '张三'
      // }
      // this.$router.push({ path: '/detail', query: { id: val, num: 60, obj: JSON.stringify(obj) } });
      // this.$router.push(`/detail?id=${val}&num=${60}&obj=${obj}`)
      // params
      // this.$router.push({ name: 'Detail', params: { id: val } })
      // this.$router.push(`/detail/${val}/${16}`)
    },
    scroll(e){
       console.log(e.target);
       this.scrollTop = e.target.scrollTop;
    }
  },
  activated(){
    this.$refs.dom.scrollTop = this.scrollTop;
  },
  beforeRouteLeave(to,from,next){
    if (to.name == "Detail"){
      to.meta.name = "About";
    }
    next();
  }
};
</script>
<style lang="scss" scoped>
.about {
  height: 100vh;
  overflow: auto;
}
button{
  position: fixed;
  top: 0px;
  left: 0px;
}

li {
  list-style: none;
  line-height: 40px;
  text-align: center;
  border-bottom: 1px solid #ccc;
}
</style>
